<template>
	<view>
		<view class="index-top-box" :style="{backgroundImage:backgroundUrl}">
			<!-- 导航栏 -->
			<uni-nav-bar :status-bar="true" :backgroundColor="background" :border="false" leftWidth="180rpx" rightWidth="180rpx" height="inherit" padding="0 0">
				<block slot="left">
					<view class="city d-a-j-c white-bj mar-top10" @tap="open('position',0)">
						<view class="d-a-j-c city-box">
							<view class="font-w-b">{{ city }}</view>
							<uni-icons type="arrowdown" color="#666" size="18" />
						</view>
					</view>
				</block>
				<view class="white-bj search a-center j-sp black50-zt pad-l-30 pad-r-30 mar-top10" @tap="open('search',0)">
					<view>热门搜索</view>
					<view class="icon-s31 font-32"></view>
				</view>
			</uni-nav-bar>
			<!-- 滚动后显示 -->
			<uni-nav-bar :status-bar="true" :border="false" title="鑫意家政" class="z-index55 wid-100 position-fixed p-top" :style="{opacity:opacity}" v-if="isNavTab"></uni-nav-bar>
			<!-- 滑动金刚区 -->
			<view class="pad-l-20 " v-if="jinlist.length>0">
				<scroll-view scroll-x="true" class="jingang-x-box">
					<block v-for="(item,index) in jinlist" :key="index">
						<view class="jingang-x-item border-r pad-l-20 pad-r-20 line-h40 font-24 black40-zt mar-right20 d-inline-block" @tap="openBanner(item.type,item.page,item.parameter,item.url_type)">{{item.name}}</view>
					</block>
				</scroll-view>
			</view>
			<!-- 4个金刚区 -->
			<view class="a-center mar-top15" v-if="jinlist2.length>0">
				<view class="jingang-4-item flex-1 d-a-j-c flex-column" v-for="(item,index) in jinlist2" :key="index" @tap="openBanner(item.type,item.page,item.parameter,item.url_type)">
					<view class="img-4"><image :src="item.icon" mode="widthFix" lazy-load></image></view>
					<view class="font-26 font-w-b mar-top5">{{item.name}}</view>
				</view>
			</view>
			<!-- 大金刚区 -->
			<index-jingang  :list="jinlist3"></index-jingang>
			<!-- banner -->
			<view class="center710 border-r-25 overflow-hidden mar-top50" v-if="bannerList.length>0" @tap="openBanner(bannerList[0].type,bannerList[0].hrefurl,bannerList[0].id,bannerList[0].url_type)">
				<image :src="bannerList[0].url" mode="widthFix" lazy-load></image>
			</view>
			<!-- banner2 -->
			<view class="center710 a-center mar-top30 black97-bj" v-if="bannerList2.length>0">
				<view class="banner-item-50" v-for="(item,index) in bannerList2" :key="index" @tap="openBanner(item.type,item.hrefurl,item.id,item.url_type)">
					<image :src="item.url" mode="widthFix" lazy-load></image>
				</view>
			</view>
			<!-- banner3 -->
			<view class="center710 a-center mar-top30 black97-bj" v-if="bannerList3.length>0">
				<view class="banner-item-33" v-for="(item,index) in bannerList3" :key="index" @tap="openBanner(item.type,item.hrefurl,item.id,item.url_type)">
					<image :src="item.url" mode="widthFix" lazy-load></image>
				</view>
			</view>
			<!-- 热卖商品 -->
			<view class="best_sellers mar-top50" v-if="bannerList4.length>0">
				<view class="a-center j-sp center">
					<view class="font-32 font-w-b">{{bannerInfo4.name}}</view>
				</view>
				<view class="mar-left30 overflow-hidden mar-top20">
					<swiper :circular="true" class="best_sellers-box" next-margin="20px">
						<block  v-for="(item,index) in bannerList4" :key="index">
							<swiper-item @tap="openBanner(item.type,item.hrefurl,item.id,item.url_type)">
								<image :src="item.url" mode="widthFix" lazy-load>
							</swiper-item>
						</block>
					</swiper>
				</view>
			</view>
			<!-- 新人首单优惠 -->
			<!-- <view class="best_sellers mar-top50">
				<view class="a-center j-sp center">
					<view class="font-32 font-w-b">{{groupInfo.name}}</view>
					<view class="a-center text-right font-24 black50-zt" @tap="open('group',groupInfo.id)">
						<view>查看全部</view>
						<view class="icon-jinru"></view>
					</view>
				</view>
				<view class="center first_order mar-top20">
					<view class="item white-bj border-r-15 d-inline-block overflow-hidden" v-for="(item,index) in groupInfo.pro" :key="index" @tap="open('shop',item.id,item.type)">
						<view><image :src="item.pic" mode="widthFix" lazy-load></image></view>
						<view class="font-26 font-w-b title text-overflow-2 line-h35 mar-top10">{{item.name}}</view>
						<view class="a-end">
							<view class="activeColor font-22">¥<text class="font-32 font-w-b">{{item.sell_price}}</text></view>
							<view class="font-22 black50-zt mar-left15">¥{{item.market_price}}</view>
						</view>
					</view>
				</view>
			</view> -->
			<!-- 分类瀑布流 -->
			<view class="index-list-box wid-100 black97-bj pad-b-30">
				<view class="title-tab center pad-30 white-bj" :class="{'postion':postion==true}">
					<scroll-view scroll-x="true">
						<block v-for="(item,index) in cateList" :key="index">
							<view class="item d-inline-block text-center mar-right30" :class="{'active':titlecur==item.id}" @tap="cateTap(item.id)">
								<view class="font-32 title">{{item.name}}<text v-if="item.isHuo==1">🔥</text></view>
								<view class="font-24 black60-zt sub-title  mar-top10 border-r">{{item.sub_name}}</view>
							</view>
						</block>
					</scroll-view>
				</view>
				<!-- 商品列表 -->
				<index-shop-list :leftPro="leftPro" :rightPro="rightPro"></index-shop-list>
			</view>
			<view class="wid-100">
				<rich-text :nodes="formatRichText(adminSet.desc)"></rich-text>
			</view>
		</view>
		<!-- 自动定义导航 -->
		<m-tabbar-item :tabIndex="tabIndex"></m-tabbar-item>
		<!-- 弹框 -->
		<view class="position-fixed p-bottom p-left p-right p-top black100-50 z-index55" v-if="showLoding && adminSet.is_tan==1" @tap="close"></view>
		<view class="position-fixed z-index99 tan_img wid-100" v-if="showLoding && adminSet.is_tan==1">
			<view class="position-relative wid-70">
				<image :src="adminSet.tan_img" mode="widthFix" lazy-load @tap="openBanner(adminSet.type,adminSet.page,adminSet.parameter,adminSet.url_type)"></image>
				<view class="position-absolute guanbi d-a-j-c" @tap="close">
					<view class="icon-guanbi white-zt font-20"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mTabbarItem from "@/components/m-tabbar-item.vue"
	import indexJingang from "@/components/index-jingang.vue"
	import indexShopList from "@/components/index-shop-list.vue"
	export default {
		components:{
			mTabbarItem,
			indexJingang,
			indexShopList
		},
		data() {
			return {
				city: '宁波市',
				background:"rgba(255,255,255,0)",
				showLoding:false,
				opacity:0,
				isNavTab:false,
				adminSet:{},
				backgroundUrl:"",
				jinlist:[],
				jinlist2:[],
				jinlist3:[],
				bannerList:[],
				bannerList2:[],
				bannerList3:[],
				bannerInfo4:{},
				bannerList4:[],
				tabIndex:0,
				postion:false,
				cateList:[],
				titlecur:0,
				groupInfo:{},
				leftPro:[],
				rightPro:[]
			}
		},
		onLoad(e) {
			uni.hideTabBar();
			if(this.$user.state.dateToday==1){
				this.showLoding=false
			}else{
				this.showLoding=true
			}
			if(this.$user.state.city!=""){
				this.city=this.$user.state.city
			}
			this.tabIndex=e.id
			this.GetAdmin()
			this.GetJin()
			this.getGroupList()
			this.getGroupInfo()
			//开启分享
			wx.showShareMenu({
				withShareTicket:true,
				menus:["shareAppMessage","shareTimeline"]
			})
		},
		onShow(e) {
			if(this.$user.state.city!=""){
				this.city=this.$user.state.city
			}
		},
		//设置分享好友的内容
		onShareAppMessage(res) {
			if (res.from=="button"){
				console.log(res.target)
			}
			return {
				title:"鑫意到家",
				path: '/pages/index/index?rid=',
				desc:"鑫意到家 · 洁新留下！",
				imageUrl:"../../static/202310131154405365.png"
			}
		},
		//分享朋友圈
		onShareTimeline(res) {
			return {
				title: '鑫意到家 · 洁新留下！',
				type: 0,
				summary: "鑫意到家 · 洁新留下！",
			}
		},
		onPullDownRefresh() {
			this.GetAdmin()
			this.getGroupList()
			this.getGroupInfo()
			//关闭下拉刷新
			//关闭下拉刷新
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},2000)
		},
		onPageScroll(e) {
			if(e.scrollTop>5){
				this.isNavTab=true
			}else{
				this.isNavTab=false
			}
			if(e.scrollTop<100){
				this.opacity=e.scrollTop/100
			}else{
				this.opacity=1
			}
			if(e.scrollTop>1500){
				this.postion=true
			}else{
				this.postion=false
			}
		},
		methods: {
			openBanner(type,url,id,url_type){
				getApp().openBanner(type,url,id,url_type)
			},
			open(type,id,lei){
				getApp().open(type,id,lei)
			},
			//关闭弹窗
			close(){
				uni.setStorageSync("dateToday",1)
				this.$user.state.dateToday=1
				this.showLoding=false
			},
			//获取商品列表
			async getShopList(type){
				const one={
					aid:1,
					limit:20,
					type:type,
					page:1,
					pid:this.titlecur
				}
				await this.$api.GetShopList(one).then(res=>{
					console.log(res)
					this.leftPro=res.data.list.filter( (v,i) => i % 2 === 0 )
					this.rightPro=res.data.list.filter( (v,i) => i % 2 !== 0 )
				})
			},
			//获取推荐为信息及商品
			async getGroupInfo(){
				const one={
					aid:1,
					status:1,
					limit:6,
					id:1
				}
				await this.$api.GetGroupInfo(one).then(res=>{
					this.groupInfo=res.data[0]
				})
			},
			//获取商品分组信息
			async getGroupList(){
				const one={
					aid:1,
					status:1,
					pid:1
				}
				await this.$api.GetShopGroupList(one).then(res=>{
					this.titlecur=res.data.list[0].id
					this.cateList=res.data.list
					this.getShopList(res.data.list[0].type)
				})
			},
			// 富文本内容格式化
			formatRichText(html) { 
				return html && html.replace(/<img[^>]*>/gi, function(match, capture) { // 查找所有的 img 元素
					return match.replace(/style=".*"/gi, '').replace(/style='.*'/gi, '') // 删除找到的所有 img 元素中的 style 属性
				}).replace(/\<img/gi, '<img style="width:100%;"') // 对 img 元素增加 style 属性，并设置宽度为 100%
			},
			//获取系统基本信息
			async GetAdmin(){
				const one={
					id:1
				}
				await this.$api.GetAdminSet(one).then(res=>{
					this.adminSet=res.data.list
					this.backgroundUrl="url('"+res.data.list.index_bj+"')"
				})
			},
			//获取金刚区
			async GetJin(){
				const jingang={
					aid: 1,
					status:1
				}
				await this.$api.GetJingang(jingang).then(res=>{
					res.data.list.forEach(item=>{
						if(item.jid==1){
							this.jinlist.push(item)
						}else if(item.jid==2){
							this.jinlist2.push(item)
						}else if(item.jid==3){
							this.jinlist3.push(item)
						}
					})
				})
				await this.$api.GetBanner(jingang).then(res=>{
					res.data.list.forEach(item=>{
						if(item.images!=""){
							if(item.id==1){
								this.bannerList=JSON.parse(item.images)
							}else if(item.id==2){
								this.bannerList2=JSON.parse(item.images)
							}else if(item.id==3){
								this.bannerList3=JSON.parse(item.images)
							}else if(item.id==4){
								this.bannerInfo4=item
								this.bannerList4=JSON.parse(item.images)
							}
						}
					})
					
				})
			},
			//tabbar点击切换事件
			cateTap(index){
				this.titlecur=index;
				let num=0
				this.cateList.forEach(item=>{
					if(item.id==index){
						num=item.type
					}
				})
				this.getShopList(num)
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.index-top-box{
		width: 100%;
		min-height: 1220rpx;
		background-repeat: no-repeat;
		background-size: 100%;
		.city{
			width: 180rpx;
			height: 65rpx;
			border-top-left-radius: 50rpx;
			border-bottom-left-radius: 50rpx;
			.city-box{
				width: 100%;
				line-height: 30rpx;
				border-right: 2rpx solid #e8e8e8;
			}
			
		}
		.search{
			height: 65rpx;
			width: 300rpx;
			line-height: 65rpx;
			border-top-right-radius: 50rpx;
			border-bottom-right-radius: 50rpx;
		}
		.jingang-x-box{
			margin-top: 420rpx;
			white-space: nowrap;
			width: 100%;
			.jingang-x-item {
				background: rgba(255, 255, 255, 0.3);
			}
		}
		.jingang-4-item{
			.img-4{
				width: 90rpx;
				height: 90rpx;
			}
		}
		
		
		.banner-item-50{
			width: 347rpx;
			&:first-child{
				margin-right: 16rpx;
			}
		}
		.banner-item-33{
			width: 226rpx;
			&:nth-child(2){
				margin-left: 16rpx;
				margin-right: 16rpx;
			}
		}
		.best_sellers-box{
			width: 700rpx;
			height: 386rpx;
			swiper-item{
				image{
					width: 640rpx;
				}
			}
		}
		.first_order{
			
			.item{
				width: 220rpx;
				margin-right: 15rpx;
				margin-bottom: 30rpx;
				&:nth-child(3n){
					margin-right: 0rpx;
				}
				.title{height: 70rpx;}
			}
			
		}
		.index-list-box{
			.title-tab{
				scroll-view {
					white-space: nowrap;
					.item{
						.sub-title{
							line-height: 52rpx;
							padding: 0 20rpx;
						}
					}
					.active{
						.title{
							font-weight: bold;
						}
						.sub-title{
							background:linear-gradient(180deg,#7ab13d,#5c8a41);
							color: #ffffff;
						}
					}
				}
			}
			.postion{
				position: fixed;
				top: 150rpx;
			}
			
		}
	}
	.tan_img{
		width: 100%;
		top: 50%;
		transform: translateY(-50%);
		view{
			margin: auto;
			.guanbi{
				top: -60rpx;
				right: -20rpx;
				border-radius: 100rpx;
				border: 3rpx solid #ffffff;
				width: 50rpx;
				height: 50rpx;
			}
		}
	}
</style>
